import { useQuery } from "@tanstack/react-query";
import { Table } from "antd";
import type { ColumnsType } from "antd/es/table";

interface Filters {
  projectType: string;
  documentType: string;
  dateRange: [string, string] | null;
  projectManager: string;
  projectPhase: string;
  industryType: string;
}

interface SearchResult {
  id: string;
  title: string;
  projectName: string;
  documentType: string;
  projectPhase: string;
  projectManager: string;
  industryType: string;
  createTime: string;
  previewUrl: string;
}

interface SearchResultsProps {
  searchQuery: string;
  filters: Filters;
}

// 测试数据
const mockData: SearchResult[] = [
  {
    id: "1",
    title: "数据中心机房设计图纸",
    projectName: "某科技公司数据中心建设项目",
    documentType: "工程设计文档",
    projectPhase: "设计阶段",
    projectManager: "张三",
    industryType: "数据中心",
    createTime: "2024-03-15",
    previewUrl: "#",
  },
  {
    id: "2",
    title: "工程总承包合同",
    projectName: "某科技公司数据中心建设项目",
    documentType: "合同文件",
    projectPhase: "经营阶段",
    projectManager: "李四",
    industryType: "数据中心",
    createTime: "2024-03-16",
    previewUrl: "#",
  },
  {
    id: "3",
    title: "施工进度月报",
    projectName: "某科技公司数据中心建设项目",
    documentType: "进度报告",
    projectPhase: "施工阶段",
    projectManager: "王五",
    industryType: "数据中心",
    createTime: "2024-03-17",
    previewUrl: "#",
  },
  {
    id: "4",
    title: "电子厂房设计说明",
    projectName: "某电子公司厂房建设项目",
    documentType: "工程设计文档",
    projectPhase: "设计阶段",
    projectManager: "赵六",
    industryType: "电子工程",
    createTime: "2024-03-18",
    previewUrl: "#",
  },
  {
    id: "5",
    title: "工程变更签证单",
    projectName: "某电子公司厂房建设项目",
    documentType: "变更签证单",
    projectPhase: "施工阶段",
    projectManager: "张三",
    industryType: "电子工程",
    createTime: "2024-03-19",
    previewUrl: "#",
  },
  {
    id: "6",
    title: "商业广场投标文件",
    projectName: "某商业广场建设项目",
    documentType: "工程设计文档",
    projectPhase: "投标阶段",
    projectManager: "李四",
    industryType: "民用建筑",
    createTime: "2024-03-20",
    previewUrl: "#",
  },
  {
    id: "7",
    title: "竣工验收报告",
    projectName: "某商业广场建设项目",
    documentType: "进度报告",
    projectPhase: "竣工验收",
    projectManager: "王五",
    industryType: "民用建筑",
    createTime: "2024-03-21",
    previewUrl: "#",
  },
];

async function searchDocuments(
  query: string,
  filters: Filters
): Promise<SearchResult[]> {
  // 模拟API延迟
  await new Promise((resolve) => setTimeout(resolve, 500));

  // 根据搜索条件和筛选条件过滤数据
  return mockData.filter((item) => {
    // 搜索关键词匹配
    const searchMatch =
      !query ||
      item.title.toLowerCase().includes(query.toLowerCase()) ||
      item.projectName.toLowerCase().includes(query.toLowerCase()) ||
      item.documentType.toLowerCase().includes(query.toLowerCase());

    // 项目类型匹配
    const projectTypeMatch =
      filters.projectType === "all" || item.projectName === filters.projectType;

    // 文档类型匹配
    const documentTypeMatch =
      filters.documentType === "all" ||
      item.documentType === filters.documentType;

    // 项目负责人匹配
    const projectManagerMatch =
      filters.projectManager === "all" ||
      item.projectManager === filters.projectManager;

    // 项目阶段匹配
    const projectPhaseMatch =
      filters.projectPhase === "all" ||
      item.projectPhase === filters.projectPhase;

    // 行业类型匹配
    const industryTypeMatch =
      filters.industryType === "all" ||
      item.industryType === filters.industryType;

    // 日期范围匹配
    let dateMatch = true;
    if (filters.dateRange) {
      const itemDate = new Date(item.createTime);
      const startDate = new Date(filters.dateRange[0]);
      const endDate = new Date(filters.dateRange[1]);
      dateMatch = itemDate >= startDate && itemDate <= endDate;
    }

    return (
      searchMatch &&
      projectTypeMatch &&
      documentTypeMatch &&
      projectManagerMatch &&
      projectPhaseMatch &&
      industryTypeMatch &&
      dateMatch
    );
  });
}

export default function SearchResults({
  searchQuery,
  filters,
}: SearchResultsProps) {
  const {
    data: results,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["search", searchQuery, filters],
    queryFn: () => searchDocuments(searchQuery, filters),
    enabled: true,
  });

  const columns: ColumnsType<SearchResult> = [
    {
      title: "文档标题",
      dataIndex: "title",
      key: "title",
      width: "20%",
    },
    {
      title: "项目名称",
      dataIndex: "projectName",
      key: "projectName",
      width: "12%",
    },
    {
      title: "文档类型",
      dataIndex: "documentType",
      key: "documentType",
      width: "10%",
    },
    {
      title: "项目阶段",
      dataIndex: "projectPhase",
      key: "projectPhase",
      width: "10%",
    },
    {
      title: "项目负责人",
      dataIndex: "projectManager",
      key: "projectManager",
      width: "10%",
    },
    {
      title: "行业类型",
      dataIndex: "industryType",
      key: "industryType",
      width: "10%",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      width: "12%",
      render: (date: string) => new Date(date).toLocaleDateString(),
    },
    {
      title: "操作",
      key: "action",
      width: "8%",
      render: (_, record) => (
        <a
          href={record.previewUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-indigo-600 hover:text-indigo-800"
        >
          预览
        </a>
      ),
    },
  ];

  if (error) {
    return (
      <div className="text-center text-red-600 p-4">搜索出错，请稍后重试</div>
    );
  }

  return (
    <Table
      columns={columns}
      dataSource={results}
      rowKey="id"
      loading={isLoading}
      pagination={{
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `共 ${total} 条记录`,
      }}
    />
  );
}
